<template>
    <div>
        <!--当前余额-->
        <div class="now">
            <p>
                当前
                <span>
                    {{userInfos.canPoint}}
                </span>
                积分
            </p>
            <!-- <p class="surplus">
                剩余兑换次数
                <span id="count">
                    {{userInfos.putCount}}
                </span>
                次
            </p> -->
        </div>

        <div class="box">
            <div class="box_top">
                <!-- <h5>请输入您要兑换的积分</h5> -->
                <!--<span class="dl">￥</span>-->
                <input type="text" maxlength="9" placeholder="请输入您要兑换的积分" v-model="postGo.point" @input="handleInput">
                <button class="btn" @click="getAssetsby()">确认</button>
            </div>
            <!-- <div class="box_bottom">
                <p>说明:用户每年可以进行兑换2次积分，数不足将无法进行兑换操作，积分兑换余额比例为1:1，兑换完成后，您可以到余额中进行查看</p>
            </div> -->
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            userInfos: {},
            userToken: '',
            postGo: {
                point: ''
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getIntegral();
        console.log(this.postGo)
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        getIntegral: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail", txt: res.data.message })
                this.$router.push('/login')
                return false;
            }
            if (res.status == 200) {
                this.userInfos = res.data.data
            }
        },
        getAssetsby: async function () {
            console.log(this.postGo)
            const res = await http.post('xshk/f/assets/pointsToBalance?token=' + this.userToken, this.postGo)
            if (res.data.code == 0) {
                this.forms = res.data
                maskTips({ id: 'balance-succ', txt: res.data.message })
                setTimeout(function () {
                    window.location.reload();
                }, 1000);

            } else {
                maskTips({ id: 'balance-fail', txt: res.data.message })
            }
        },
        handleInput(e){
            this.postGo.point=e.target.value.replace(/[^\d]/g,'');
        }
    }
}
</script>

<style  scoped>
/*当前余额*/
.now{
    width: 88.5%;
    height: 3rem;
    text-align: center;
    color: #fff;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: .4rem auto 0;
    background:#aad114;
    box-sizing: border-box;
    padding: .78rem 0;
}
.now p{
    
    font-size: .5rem;
    line-height: .82rem;
  font-family: "Microsoft YaHei";
}
.now span{
    font-size: .65rem;
    font-weight: 900;
  font-family: "Microsoft YaHei";
}

.now .surplus{
    font-weight: 500;
    font-size: .5rem;
    line-height: .82rem;
    color:#DDFFE8;
  font-family: "MicrosoftYaHei";
}
.now .surplus #count{
    font-size: .33rem;
    font-weight: 600;
  font-family: "MicrosoftYaHei";
}

.box{
    padding: 0 .4rem;
    box-sizing: border-box;
}
.box .box_top h5{
  margin-top: 0.4rem;
  font-size: 0.3rem;
  font-weight: 500;
  color: #3b3b3b;
  font-family: "PingFang-SC-Medium";
}
.box .box_top input{
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
  float: left;
  border: none;
  outline: none;
  font-size: 0.45rem;
  line-height: 0.6rem;
  font-weight: 600;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 auto 0.48rem;
  font-family: "PingFang-SC-Heavy";
  position: relative;
  /*padding: 0 .6rem;*/
}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 0.45rem;
  line-height: 0.6rem;
  text-align: left;
  font-weight: 600;
  font-family: "PingFang-SC-Heavy";
}
/*.dl{*/
  /*position:absolute;*/
  /*display: inline-block;*/
  /*height:1rem;*/
  /*left: 6%;*/
  /*top: 39.8%;*/
  /*z-index: 9;*/
  /*font-family: "PingFang-SC-Heavy";*/
  /*font-size: 0.6rem;*/
  /*line-height: 0.6rem;*/
  /*font-weight: 600;*/
/*}*/
.box .box_top .btn{
    float: left;
    width: 100%;
    height: .96rem;
    border: none;
    outline: none;
    background: #aad114;
    border-radius: 5px;
    color: #fff;
    margin-bottom: .4rem;
    font-size: .38rem;
}




.box .box_bottom{
    font-size:.27rem;
    color:#999;
}
.box .box_bottom p{
    line-height: .48rem;
}
.box .box_bottom .bto_p{
  font-size:.24rem;
}
</style>
